
import ChartStore from '../../../stores/ChartStore';
import icons from '../../../images/chartImages';
import { observer } from 'mobx-react';
import './Info.scss';

const tabs: Array<any> = [
    { icon: icons.statistic, iconOff: icons.statistic_off, key: 1 },
    { icon: icons.kline_tab, iconOff: icons.kline_tab_off, key: 2 },
    { icon: icons.recommend_tab, iconOff: icons.recommend_tab_off, key: 3 },
];
export const Info = observer(() => {
    return (
        <div className="tabWrapper" >
            <div className="taberContainer">
                <div className="taber">
                    {tabs.map((t, i) => {
                        return <div key={i} className="tabItem" onClick={() => {
                            ChartStore.changeTab(t.key, i);
                            return;
                        }}>
                            <img src={ChartStore.stockTab === t.key ? t.icon : t.iconOff} alt='' ></img>
                        </div>
                    })}
                </div>
                <div className="tabBar" style={{
                    left: ChartStore.checkedPosition
                }}
                ></div>
            </div>
        </div>
    );
})